<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <son-components1></son-components1>
  <son-components2 @fun="show"></son-components2>
  <p>{{parentstrong}}</p>
</div>

<template id="teml">
  <div>
    <h2> son-components2 </h2>
    <input type="button" id="" value="这是子组件的按钮，点击触发父组件" @click="myclick" />
  </div>
</template>

<script type="text/javascript">
  //子组件的东西·
  var sonCom = {
    template: "#teml",
    data: function () {
      return {
        person: {
          name: "儿子",
          sex: 10,
          message:"子向父传参"
        }
      }
    },
    methods: {
      myclick() {
        // emit 英文原意： 是触发，调用、发射的意思
        this.$emit('fun', this.person)
      }
    }
  }

  var vm = new Vue({
    el: '#app',
    data: {
      parentstrong: '',
    },
    methods: {
      show(data) {
        console.log("调用了父组件的show()方法", data);
        this.parentstrong = data;
      }
    },
    //组件
    components: {
      sonComponents1: { template: '<h1 style="color:red">son-components1</h1>' },
      sonComponents2: sonCom,
    }
  })

</script>